<template>
	<view class="study-con">
		<view class="study-top">
			<view class="over-circular" >
				<view class="tui-circular-progress">
					<tui-circular-progress 
					progressColor="#0089ce" 
					fontColor="#191919" 
					:percentage="practice_record.scale" 
					:diam="150" 
					:lineWidth="12"
					fontSize="30rpx"
					:counterclockwise="false"
					>
					</tui-circular-progress>
				</view>
				<view class="circular-progress">
					<text >{{practice_record.scale}}<text style="font-size: 17px;">%</text></text>
					<text>综合正确率</text>
				</view>
				
			</view>
			
			<view class="study-top-bom">
				<view>
					<text>{{practice_record.test_num}}</text>
					<text>累计答题</text>
				</view>
				<view>
					<text>{{practice_record.right_num}}</text>
					<text>正确总数</text>
				</view>
				<view>
					<text>{{practice_record.wrong_num}}</text>
					<text>错题总数</text>
				</view>
			</view>
		</view>
		<view style="height: 20rpx;background-color: #EFEFEF;width: 100%;"></view>
		<view class="study-con-cen">
			<text style="margin-bottom: 20rpx;">学习记录</text>
			<u-empty v-if="list==''"
					mode="list"
					icon="https://shuati26.kptedu.com/uploads/image/wushuati.png"
					text="空空的什么都没有"
					textColor="#666"
					width="300rpx"
					height="300rpx"
			>
			</u-empty>
			<view v-for="(item,index) in list" :key="index" 
					@click="goto_detail(item)"
					class="study-list-jl">
				<view class="study-title" >
					{{item.date}}
				</view>
				<view class="study-list-bom" >
					<view class="study-list-bom-left" >
						<view class="study-list-bom-left-btn">
						{{item.subject_name}}
						</view>
						{{item.subject_name}}{{item.parent_unit}}-{{item.unit_name}}
					</view>
					<view  class="study-list-bom-right">
						正确率:{{item.scale}}%
					</view>
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	import tuiCircularProgress from "@/pagesa/components/thorui/tui-circular-progress/tui-circular-progress"
	export default {
		data() {
			return {
				unit_list:[],
				practice_record:{},
				scale:'',
				list:[],
			}
		},
		onLoad(){
			
		},
		components:{
			tuiCircularProgress
		},
		onShow() {
			this.get_study_record();
			
			this.get_studyUnit();
			
		},
		methods: {
			async get_study_record() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.unitStudyRecord,
					data: {
						province: uni.getStorageSync('choose_cityName'),
						
					},
					needLogin: true
				})
				if (res.code == 1) {
					this.practice_record = res.data
					console.log(JSON.stringify(res.data)+"学习记录")
				}
			
		},
		async get_studyUnit() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.studyUnit,
					data: {
						province:uni.getStorageSync('choose_cityName'),
						subject_id:0,
						page:1,
						limit:4,
						
					},
					needLogin: true,
				})
				//console.log(JSON.stringify(res.data.data)+"4654564学习记录")
				if (res.code == 1) {
					this.list = res.data.data
					console.log(JSON.stringify(res.data.data)+"4654564学习记录")
				}
			
		},
		goto_detail(item){
			this.$openrul('/pagesa/questionBank/questionOver/index?id=' + item.id + '&name=' + item.unit_name+'&scale='+item.scale)
		},
		
		}
	}
</script>

<style>
.study-con{
	display:flex;
	flex-flow: column wrap;
}
.study-top{
	
}
.study-top-bom{
	width:93%;
	margin:0 auto;
	border-radius:20rpx;
	background:#fff;
	background-color: #F7F8FA;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	height: 180rpx;
	margin-bottom: 40rpx;
	
}
.study-top-bom>view{
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	
}
.study-top-bom>view>text:nth-child(1){
	font-size: 40rpx;
	font-weight: 600;
}
.study-top-bom>view>text:nth-child(2){
	color: #9C9C9C;
	
}
.study-con-cen{
	display: flex;
	flex-flow: column wrap;
	
}
.study-con-cen>text:nth-child(1){
	font-size: 43rpx;
	font-weight: 900;
	margin-top: 50rpx;
	margin-left: 20rpx;
	margin-bottom: 20rpx;
	
}
.study-con-cen-list{
	width: 93%;
	display: flex;
	flex-flow: column nowrap;
	margin: auto;
	margin-top: 30rpx;
	
}
.study-con-cen-list>text:nth-child(1){
	color: #9c9c9c;
	font-size: 28rpx;
}
.study-list-ltem{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	margin-top: 15rpx;
}
.study-list-ltem>view:nth-child(1){
	display: flex;
	flex-flow: row nowrap;
}
.study-list-ltem>view>view:nth-child(1){
	background-color: #00BFFF;
	color: #0374F4;
	border-radius:5rpx ;
	font-size: 25rpx;
	width: 100rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	margin-right: 10rpx;
	
	
}
.study-list-ltem>view:nth-child(2){
	border-radius: 50rpx;
	padding: 20rpx;
	color: #9C9C9C;
	background-color: #EFEFEF;
	position: relative;
	top: -50rpx;
	height: 30rpx;
	line-height: 30rpx;
	
}
/**/
.over-circular{
	
	margin: 30rpx auto 30rpx;
}
 .tui-circular-progress{
	 display: flex;
	 justify-content: center;
	 align-items: center;
 }
 
 .circular-progress{
	     position: absolute;
	     top: 110rpx;
	     left: 300rpx;
		 display: flex;
	 flex-flow: column wrap;
	 justify-content: center;
	 align-items: center;
 }
 .circular-progress>text:nth-child(1){
	 font-size: 70rpx;
	 font-weight: 700;
	 
 }
.circular-progress>text:nth-child(2){
	     font-size: 30rpx;
	         color: #08080899;
 }
    
	/**/
	.kaoshi-tiku-content {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-flow: column nowrap;
		
		font-size: 14px;
		padding: 10px 0;
		border-bottom: solid 1px #f5f5f5;
		height: 100rpx;
	}
	
	.kaoshi-tiku-content .icon-arrow {
		padding-left: 13px;
		color: #b3b3b3;
	}
	
	.kaoshi-tiku-content-flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: inherit;
	}
	
	.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
		padding-bottom: 6px;
	}
	
	.kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
		font-size: 14px;
	}
	
	.kaoshi-tiku-content-top {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 16px;
	}
	
	.kaoshi-tiku-content-top img {
		width: 20px;
		height: 22px;
		margin-right: 10px;
	}
	
	.kaoshi-tiku-content-bottom {
		font-size: 11px;
		    display: flex;
		    align-items: center;
		    color: #9c9c9c;
		    width: 450rpx;
		    justify-content: space-around;
		
	}
	
	.kaoshi-tiku-content-flex .icon-dui2 {
		margin: 2px 2px 0 0;
		color: #3c7bfc;
	}
	.kaoshi-tiku-content-bottom>image{
		    width: 20px;
		    height: 20px;
		    position: relative;
		    top: -30rpx;
		    left: 80rpx;
		
	}
	.study-list-jl{
		display: flex;
		flex-flow: column wrap;
		margin: auto;
		width: 90%;
		height: 120rpx;
		letter-spacing: 1px;
	}
	.study-title{
		    color: #0c0c0cd1;
		    font-size: 24rpx;
	}
	.study-list-bom{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		margin-top: 10rpx;
		color: #000;
		justify-content:space-between;
	}
	.study-list-bom-left{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		font-size: 25rpx;
	}
	.study-list-bom-left-btn{
		width: 40px;
		    height: 17px;
		    background-color: #e0f7fd;
		    color: #51b6ea;
		    border-radius: 5rpx;
		    padding: 2px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    font-size: 25rpx;
	}
	.study-list-bom-right{
		display: flex;
		    justify-content: center;
		    align-items: center;
		    color: #06060678;
		    background-color: #EFEFEF;
		    font-size: 24rpx;
		    border-radius: 50rpx;
		    height: 32px;
		    width: 87px;		
	}
</style>
